<template>
  <div class="warp container">
  	<!-- 头部 -->
    <div class="header header-center">
        <router-link :to="{path:'/search'}" class="search-icon search">
            <input type="text" placeholder="书名">
        </router-link>
    </div>

  	<!-- 主题 -->
  	<div class="home">
  		<div class="banner">
  			<swiper :options="bannerSwier" ref="mySwiper">
  			    <swiper-slide v-for="(item,index) in bannerList">
              <router-link :to="{path:'/bookdetails/'+item.id}" class="img-box">
                  <img :src="item.pic ? item.pic : errorBannerDefaultImg" :onerror="errorBannerDefaultImg">
              </router-link>
  			    </swiper-slide>
  			    <div class="swiper-pagination" slot="pagination"></div>
  			</swiper>
  		</div>

      <div class="type-list">
        <router-link :to="{path:'/totalRanking/1'}">
          <img src="../assets/images/home/topic1.png">
          <p>排行榜</p>
        </router-link>
        <router-link :to="{path:'/classify/1'}">
          <img src="../assets/images/home/topic2.png">
          <p>男频</p>
        </router-link>
        <router-link :to="{path:'/classify/2'}">
          <img src="../assets/images/home/topic3.png">
          <p>女频</p>
        </router-link>
      </div>


      <div class="tt">
        <span class="tt-name">今日主编推荐</span>
        <router-link :to="{path:'/recommend'}" class="more">查看更多</router-link>
      </div>

      <div class="home-item">
        <router-link :to="{path:'/bookdetails/'+todayList[0].id}" v-if="todayList.length">
            <div class="layout1-box">
              <img :src="todayList[0].cover ? todayList[0].cover : errorBookDefaultImg" class="item-l" :onerror="errorBookDefaultImg">
              <div class="item-r">
                  <h3 class="item-tt">{{todayList[0].title}}</h3>
                  <p class="item-desc">{{todayList[0].intro}}</p>
                  <p class="item-info">
                    <span>{{todayList[0].author}}</span>
                    <span class="label">
                      <i class="blue" v-for="label in todayList[0].label">{{label}}</i>
                      <i class="green">标签</i>
                    </span>
                  </p>
              </div>
            </div>
        </router-link>

        <div class="book-list cf">
          <router-link :to="{path:'/bookdetails/'+item.id}" class="book-item book-layout1" v-for="(item,index) in todayList">
            <img :src="item.cover ? item.cover : errorBookDefaultImg" :onerror="errorBookDefaultImg">
            <p class="name">{{item.title}}</p>
            <p class="author">{{item.author}}</p>
          </router-link>
        </div>
      </div>


      <div class="tt">
        <span class="tt-name">专题推荐</span>
        <router-link :to="{path:'/classify/1'}" class="more">查看更多</router-link>
      </div>


      <div class="recommend cf">
          <router-link :to="{path:'/typeBook/'+item.id}" v-for="(item,index) in recommendList">
            <p>{{item.class_name}}</p>
            <img :src="item.cover_pic ? item.cover_pic : errorBookDefaultImg" :onerror="errorBookDefaultImg">
          </router-link>
      </div>
    </div>


    <!-- 侧边栏 -->
    <sidebar v-show="sidebar"></sidebar>
    <!-- 底部 -->
    <web-footer active="enjoy"></web-footer>
  </div>

</template>
<script>
  import bookDefaultImg from '@/assets/images/book.png';
  import bannerDefaultImg from '@/assets/images/banner.png';
  import WebFooter from '../PUBLIC/footer.vue';
  import sidebar from '../components/sidebar.vue';
  import { swiper, swiperSlide } from 'vue-awesome-swiper';

    export default {
      name: 'home',
      components: {
          WebFooter,
          swiper,
        swiperSlide,
        sidebar
      },
    	data () {
      		return {
            errorBookDefaultImg:'this.src="' + bookDefaultImg + '"',
            errorBannerDefaultImg:'this.src="' + bannerDefaultImg + '"',
	        	bannerSwier: {
              effect : 'coverflow',
              slidesPerView: 1,
              initialSlide:1,
              centeredSlides: true,
              coverflowEffect: {
                rotate: 0,
                stretch: 25,
                depth: 70,
                slideShadows : false
              },
              autoplay : {
                delay:3000
              },
              pagination: {
                el: '.swiper-pagination'
              },
              centeredSlides: true,
		          paginationClickable :true,
              followFinger : false,
		        },
            bannerList:[],
            menuShow:false,
            sidebar:false,
            todayList:[],
            recommendList:[]
	      	}
	    },
      computed: {
         swiper() {
           return this.$refs.mySwiper.swiper
         }
      },
      created(){
        var data = localStorage.getItem('gender');
        var dataObj = JSON.parse(data);
        if(!dataObj){
            this.$router.push({ path: '/selectGender'})
            return false;
        }

        this.$axios.get(this.$store.state.url+"recommend_class?device_sn="+this.$store.state.device).then(res=>{
          console.log(res.data);
          this.recommendList = res.data.list;
        });
        this.$axios.get(this.$store.state.url+"recommend_today?device_sn="+this.$store.state.device).then(res=>{
          console.log(res.data);
          this.todayList = res.data.list;
        });
        this.$axios.get(this.$store.state.url+"ad_list?device_sn="+this.$store.state.device).then(res=>{
          console.log(res.data);
          this.bannerList = res.data.list;
          this.swiper.update();
        });
      },
	    mounted(){

	    },
	    methods:{
	      	back(){
	        	this.$router.go('-1')
	      	},
          menuToggle(){
            this.menuShow = !this.menuShow;
          }
	    }
  	}
</script>
<style lang="scss" scoped>
    .search{
      width:100%;
      font-size:24px;
      position: relative;
      background-color:#f5f5f5;
      border-radius:16px;
      &.search-icon:after{
        left:auto;
        right:20px;
      }
      input{
        height:60px;
        padding:0 25px;
        line-height:60px;
        font-size:24px;
      }

    }
    ::-webkit-input-placeholder {
  　　color:#c7c7c7;
     font-size:24px;
    }

    .home{
      padding-top:30px;
      .swiper-container{
        width:10rem;
      }
      .swiper-slide{
          padding:0 20px;
      }
      .img-box{
        padding:0 40px;
        display: block;
      }
      .type-list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 30px 30px;
        margin-top:40px;
        border-bottom:2px solid #c7c7c7;
        a{
          width:33.33%;
          text-align: center;
          img{
            width:81px;
          }
          p{
            font-size:28px;
            color:#000;
          }
        }
      }
      .tt{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 30px;
        margin-top:30px;
        .tt-name{
          font-size:38px;
          font-weight:bold;
        }
        .more{
          font-size:32px;
          color:#9a9a9a;
        }
      }
      .home-item{
        padding:0 30px;
        margin-top:40px;
      }
      .book-list{
        margin-top:50px;
        a:nth-child(4n+4){
          margin-right:0;
        }
        a{
          width:23.5%;
          margin-right:2%;
          margin-bottom:30px;
          text-align: center;
          float:left;
          a:last-child{
            margin-right:0;
          }
          p{
            text-align:left;
          }
          .name{
            font-size:30px;
            color:#767676;
            overflow:hidden; 
            text-overflow:ellipsis;
            display:-webkit-box; 
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
            height:90px;
            margin-top:30px;
          }
          .author{
            font-size:28px;
            color:#c5c5c5;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            margin-top:10px;
          }
        }
      }

      .recommend{
        padding:0 30px;
        margin-top:30px;
        a{
          display:flex;
          justify-content: space-between;
          align-items: center;
          padding:20px;
          background-color:#f4f5f7;
          width:48%;
          margin-right:4%;
          float: left;
          margin-bottom:28px;
          &:nth-child(2n+2){
            margin-right:0;
          }
          img{
            width:90px;
          }
          p{
            display: inline-block;
            vertical-align: middle;
            font-size:35px;
            color:#1e1e1e;
          } 
        }
      }
    }
</style>
